<template>
	<view>
		<!-- 顶部区分栏 帮我取 帮我买 rgba(81, 211, 211, 1)-->
		<view class="Run_1">
			<view class="Run_1_1" :style="{'border-bottom':rgba1,'font-weight':rgba3,'font-style':rgba4,'letter-spacing':rgba5,'color':rgba6}">
				<text class="Run_2" @click="OnquAndmai(1)">帮我取</text>
			</view>

			<view class="Run_1_2" :style="{'border-bottom':rgba2,'font-weight':rgba7,'font-style':rgba8,'letter-spacing':rgba9,'color':rgba10}">
				<text class="Run_3" @click="OnquAndmai(2)">帮我买</text>
			</view>
		</view>
		<!-- 帮我买 -->
		<view class="" v-if="bangGet_set===1">
			<!-- 头 -->
			<!-- 信息填报栏 送到哪里-->
			<view class="Run_4" @click="open()">
				<image class="Run_4_1"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E6%94%B6.png">
				</image>
				<text class="Run_4_2">{{ Stext }}</text>
				<text class="Run_4_3">{{ Ttext }}</text>
				<image class="Run_4_4"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png">
				</image>

			</view>
			<!-- 开始 取件时间-->
			<view class="Run_5">
				<text class="Run_5_1">取件时间</text>
				<view class="uni-list" style="position: absolute;color: red;font-weight: bold;font-size: 14px;">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="selector" @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input"
									style="width: 670rpx;height: 134rpx;line-height: 134rpx;direction: rtl;padding-right: 25px;">
									{{array[index]}}
								</view>
							</picker>
						</view>
					</view>
				</view>
				<image class="Run_4_4"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png">
				</image>
			</view>
			<!-- 结束 取件时间-->

			<!-- 开始 范围-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">范围</text>
				<radio-group class="Run_fw_labe2">
					<label class="" style="width:200rpx;transform:scale(0.7);" v-for="(item, index) in items"
						:key="item.value">
						<view @click="radioFawei(item)">
							<radio :value="item.value" :checked="index === currentradio" />
							<view class="Run_fw_1">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
			<!-- 结束 范围-->


			<!-- 开始 备注信息-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">备注信息</text>
				<uni-easyinput v-model="information" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写备注信息或填写取件码" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 备注信息-->

			<!-- 尾 -->
		</view>
		<!-- 帮我取 -->
		<view class="" v-if="bangGet_set===2">
			<!-- 头 -->

			<!-- 开始 信息填报栏 送到哪里-->
			<view class="Run_4">
				<image class="Run_4_1"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E8%BD%A6%E5%AD%90.png">
				</image>
				<text class="Run_5_1" style="padding-left: 86rpx;">万能帮买</text>
				<uni-easyinput v-model="Buy" style="width: 74%;position: absolute;left: 240rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填需要帮买的物品或者东西" :inputBorder="false">
				</uni-easyinput>

			</view>
			<!-- 信息填报栏 送到哪里 结束-->

			<!-- 开始 信息填报栏 送到哪里-->
			<view class="Run_4" @click="open()">
				<image class="Run_4_1"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E6%94%B6.png">
				</image>
				<text class="Run_4_2">{{ Stext }}</text>
				<text class="Run_4_3">{{ Ttext }}</text>
				<image class="Run_4_4"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png">
				</image>

			</view>
			<!-- 信息填报栏 送到哪里 结束-->

			<!-- 开始 取件时间-->
			<view class="Run_5">
				<text class="Run_5_1">取件时间</text>
				<view class="uni-list" style="position: absolute;color: red;font-weight: bold;font-size: 14px;">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="selector" @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input"
									style="width: 670rpx;height: 134rpx;line-height: 134rpx;direction: rtl;padding-right: 25px;">
									{{array[index]}}
								</view>
							</picker>
						</view>
					</view>
				</view>
				<image class="Run_4_4"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%B7%91%E8%85%BF%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png">
				</image>
			</view>
			<!-- 结束 取件时间-->

			<!-- 开始 范围-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">范围</text>
				<radio-group class="Run_fw_labe2">
					<label class="" style="width:200rpx;transform:scale(0.7);" v-for="(item, index) in items"
						:key="item.value">
						<view @click="radioFawei(item)">
							<radio :value="item.value" :checked="index === currentradio" />
							<view class="Run_fw_1">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
			<!-- 结束 范围-->


			<!-- 开始 备注信息-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">备注信息</text>
				<uni-easyinput v-model="information" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写备注信息或填写取件码" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 备注信息-->

			<!-- 开始 可附选图片-->
			<view class="Run_55" style="margin-top: 10rpx;">
				<text class="Run_5_1">可选附图</text>
				<view class="example-body" style="padding: 40px 20px 0px 20px;">
					<uni-file-picker v-model="imageValue" fileMediatype="image" @select="select" limit="3" title="最多选择3张图片(物品形状描述图)"></uni-file-picker>
				</view>
			</view>
			<!-- 结束 可附选图片-->
			<!-- 尾 -->
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" type="bottom" isMaskClick="true" background-color="#ffffff">
			<view class="popup-project">
				<!-- <view class="popup-content"  :class="{ 'popup-height': type === 'left' || type === 'right' }"> -->
				<view class="Runaddress_1"><text>选择添加地址</text></view>
				<scroll-view class="scroll-view_H" style="height: 500rpx" scroll-y="true">
					<radio-group>
						<view class="Runaddress_2" v-for="(item, index) in array_address" :key="item.value"
							@click="radioChange(item)">
							<radio style="transform: scale(0.7);padding-top: 20rpx;" :value="item.value"
								:checked="index === current" />
							<view class="Runaddress_3">{{item.name+" "+item.iphone}}
								<view class="Runaddress_6" v-if="item.mor===1">
									<text>默认</text>
								</view>
							</view>
							<view class="Runaddress_4">{{item.province+item.city+item.area+item.address}}</view>
							<image class="Runaddress_5" @click="onBjAddress(item)"
								src="https://bkimges.oss-cn-beijing.aliyuncs.com/Img编辑.png?oss-cn-process=image/watmek">
							</image>
						</view>

						</label>
					</radio-group>
				</scroll-view>
				<button class="uniBt_but uniBt_but22" style="background-color: rgba(81, 211, 211, 1);" type="warn"
					size="default" @click="Address()">新增地址</button>
			</view>
		</uni-popup>

		<!-- 底部 -->
		<view class="tabbar-container">
			<block>
				<view class="tabbar-item">
					<text class="border-price">价格：<text style="color: #FF0000;"
							v-model="price">{{ price }}</text></text>
					<button class="uniBt_but2" @click="onRunint()">立即下单</button>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import uploadImage from '../../js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				//判断是帮我买 还是 帮我取
				bangGet_set: 1,
				rgba1: '3px solid rgba(81, 211, 211, 1)',
				rgba2: '',
				rgba3:'700',
				rgba4:'italic',
				rgba5:'normal',
				rgba6:'#027DB4',
				rgba7:'',
				rgba8:'',
				rgba9:'',
				rgba10:'',
				Stext: '送到哪里?',
				Ttext: '填写收货地址',
				name: '', //姓名
				phone: '', //手机号
				time: '立即上门', //时间
				fangwei: '', //范围
				information: '', //备注信息
				Buy: '', //要买什么东西
				//立即上门 时间选择 索引默认第一个
				array: ['立即上门', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00',
					'16:00-17:00', '17:00-18:00'
				],
				//选择的地址信息
				index: 0,
				//添加地址弹出框
				array_address: [{
						value: '1',
						name: '方晓佳',
						iphone: '13559453225',
						province: '福建省',
						city: '福州市',
						area: "鼓楼区",
						areavalue: '350102',
						address: '福州大学至诚学院中2#405',
						mor: 1,
					},
					{
						value: '2',
						name: '张三',
						iphone: '13712345678',
						province: '福建省',
						city: '福州市',
						area: "鼓楼区",
						areavalue: '350103',
						address: '盖山振幅音符小区一期一栋西区1005阿斯达十阿萨大大安卓啊啊',
						mor: 0,
					},
					{
						value: '3',
						name: '李四',
						iphone: '13712345678',
						province: '福建省',
						city: '福州市',
						area: "鼓楼区",
						areavalue: '350104',
						address: '福州大学至诚学院中2#405啊啊啊啊啊啊',
						mor: 0,
					},
					{
						value: '4',
						name: '李四12',
						iphone: '13712345678',
						province: '福建省',
						city: '福州市',
						area: "鼓楼区",
						areavalue: '350105',
						address: '福州大学至诚学院中2#405啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
						mor: 0,
					}
				],
				current: 0,
				userid: '212106710',
				items: [{
						value: '￥4.00',
						name: '东区'
					},
					{
						value: '￥3.00',
						name: '中区'
					},
					{
						value: '￥5.00',
						name: '西区'
					},
				],
				currentradio: 0,
				//价格
				price: '￥4.00',
				//选择上传图片的地址
				imageValue:[],



			};
		},
		onLoad() {

		},
		methods: {
			//头部切换
			OnquAndmai(index) {
				if (index === 1) {
					this.rgba1 = '3px solid rgba(81, 211, 211, 1)'
					this.rgba2 = '0px solid #FFFFFF'
					this.rgba3='700'
					this.rgba4=	'italic'
					this.rgba5='normal'
					this.rgba6=	'#027DB4'
					this.rgba7=''
					this.rgba8=	''
					this.rgba9=''
					this.rgba10=''

					this.bangGet_set = 1
				} else if (index === 2) {
					this.rgba1 = '0px solid #FFFFFF'
					this.rgba2 = '3px solid rgba(81, 211, 211, 1)'
					this.rgba3=''
					this.rgba4=	''
					this.rgba5=''
					this.rgba6=	''
					this.rgba7='700'
					this.rgba8=	'italic'
					this.rgba9='normal'
					this.rgba10='#027DB4'
					this.bangGet_set = 2
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.time = this.array[this.index]
			},
			AddressBinkchange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			open() {
				this.$refs.popup.open('bottom')
				console.log('1dd')
			},
			//弹出框单选按钮触发联动数据保存
			radioChange: function(evt) {

				for (let i = 0; i < this.array_address.length; i++) {
					if (this.array_address[i].value === evt.value) {
						this.current = i;
						this.Stext = evt.name + " " + evt.iphone;
						this.name = evt.name
						this.phone = evt.iphone;
						this.Ttext = evt.province + evt.city + evt.area + evt.address;
						break;
					}
				}
				this.$refs.popup.close()

			},
			//方位单选按钮联动价格
			radioFawei(item) {
				this.fangwei = item.name
				this.price = item.value
				console.log(item)
			},
			Address() {
				// uni.setStorage({
				// 	key:'Run_er',
				// 	data:item,
				// 	success:function(){
				// 		console.log("向下级发送："+item)
				// 	}
				// })
				uni.navigateTo({
					url: '/pages/Run_errands/Address/Address'
				})
			},
			//编辑地址跳转
			onBjAddress(item) {
				uni.setStorage({
					key: 'Run_er',
					data: item,
					success: function() {
						console.log("向下级发送：" + item)
					}
				})
				uni.navigateTo({
					url: '/pages/Run_errands/Bj_Address/Bj_Address?userid=212106710'
				})
			},
			//立即下单跳转
			onRunint() {
				uni.$showMsg('下单成功')
				
				if(this.bangGet_set===1){
					//张三 13712345678 福建省福州市鼓楼区盖山振幅音符小区一期一栋西区1005阿斯达十阿萨大大安卓啊啊 11:00-12:00  1441-159-145
					console.log(this.name + " " + this.phone + " " + this.Ttext + " " + this.time + " " + this.fangwei + " " +
						this.information)
					setTimeout(function() {
						uni.navigateBack({})
					}, 2000);
				}else if(this.bangGet_set===2){
					//泡面 方晓佳 13559453225 福建省福州市鼓楼区福州大学至诚学院中2#405 12:00-13:00 中区 11111
					console.log(this.Buy+" "+this.name + " " + this.phone + " " + this.Ttext + " " + this.time + " " + this.fangwei + " " +
						this.information)
					this.uploadOss()
				}
				
			},
			//获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			//上传图片
			uploadOss(){			    
			   //支持多图上传
			   for (var i = 0; i < this.imageValue.length; i++) {
			       //显示消息提示框
			       uni.showLoading({
			         mask: true
			       })
			       uploadImage(this.imageValue[i].image.location, 'UserRunImg/', 
			       result => { 
			           console.log(JSON.stringify(result));
			           uni.hideLoading(); 
			           //成功之后，可以将result带去执行其它方法或者赋值
			           
			       },result =>{ 
			           //这里写上传失败的代码 
			           console.log(JSON.stringify(result));
			       })
			   }
			},

		}
	}
</script>

<style lang="scss">
	//底部自定义
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 0 5px #999;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
		background-color: #FFFFFF;
	}

	.tabbar-container .tabbar-item {
		width: 33.33%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		color: #f00;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -50rpx;
		left: calc(50% - 50rpx);
		border-radius: 50%;
		box-shadow: 0 0 5px #999;
		background-color: #ffffff;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 28rpx;
		width: 100%;
	}

	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 5rpx;
		padding-bottom: 8px;
	}

	//按钮r
	.uniBt_but1 {
		border-width: 0px;
		position: absolute;
		left: 35rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.uniBt_but2 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-width: 0px;
		position: absolute;
		left: 385rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.border-price {
		width: 300rpx;
		padding-left: 60rpx;
		padding-bottom: 20rpx;
		font-size: 17px;
	}

	//顶部导航栏
	.Run_1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		text-align: center;
	}

	.Run_1_1,
	.Run_1_2 {
		width: 375rpx;
	}

	//顶部导航栏 文本样式
	.Run_2,
	.Run_3 {
		font-size: 25px;
		font-family: "微软雅黑";
		height: 100rpx;
		line-height: 100rpx;
	}

	//送到哪样式
	.Run_4 {
		position: relative;
		left: 34rpx;
		top: 120rpx;
		width: 688rpx;
		height: 132rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;

	}

	.Run_4_1 {
		border-width: 0px;
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		width: 76rpx;
		height: 72rpx;
	}

	.Run_4_2 {
		border-width: 0px;
		position: absolute;
		left: 120rpx;
		top: 30rpx;
		width: 450rpx;
		height: 40rpx;
		display: flex;
		font-family: '微软雅黑';
		font-weight: 400;
		font-style: normal;
	}

	.Run_4_3 {
		border-width: 0px;
		position: absolute;
		left: 120rpx;
		top: 70rpx;
		width: 480rpx;
		height: 28rpx;
		display: flex;
		font-family: '微软雅黑';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
		color: #C1C0C0;
	}

	.Run_4_4 {
		border-width: 0px;
		position: absolute;
		left: 612rpx;
		top: 48rpx;
		width: 44rpx;
		height: 40rpx;
		display: flex;
	}

	//取件时间样式
	.Run_5 {
		position: relative;
		left: 34rpx;
		top: 130rpx;
		width: 688rpx;
		height: 132rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;

	}

	.Run_5_1 {
		border-width: 0px;
		position: absolute;
		left: 36rpx;
		top: 45rpx;
		width: 128rpx;
		height: 38rpx;
		display: flex;
		font-family: '微软雅黑';
		font-weight: bold;
		font-style: normal;
	}

	//弹出地址框样式
	.Runaddress_1 {
		height: 100rpx;
		text-align: center;
		font-size: 18px;
		padding-top: 10px;
	}

	.Runaddress_2 {
		position: relative;
		padding: 10px;
		border-bottom: 1px solid ghostwhite;
		height: 130rpx;
	}

	.Runaddress_3 {
		position: absolute;
		left: 80rpx;
		height: 40rpx;
		top: 15rpx;
	}

	.Runaddress_4 {
		position: absolute;
		top: 70rpx;
		left: 80rpx;
		font-size: 13px;
		width: 560rpx;
	}

	.Runaddress_5 {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		top: 35rpx;
		left: 650rpx;
	}

	.Runaddress_6 {
		position: absolute;
		left: 330rpx;
		width: 70rpx;
		background-color: orangered;
		color: #ffffff;
		font-size: 12px;
		top: 3px;
		text-align: center;
	}

	.uniBt_but22 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-radius: 15px;
		width: 500rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 15px;
		margin-top: 40rpx;
		background-color: rgba(81, 211, 211, 1);
	}

	//范围样式
	.Run_fw_label {
		width: 200px;
		position: absolute;
		left: 200rpx;
		top: 40rpx;
	}

	.Run_fw_1 {
		position: absolute;
		top: 0px;
		left: 60rpx;
		padding-top: 4rpx;
	}

	.Run_fw_labe2 {
		display: flex;
		width: 400rpx;
		padding-top: 40rpx;
		margin-left: 120rpx;
		font-size: 18px;
	}

	.Run_55 {
		position: relative;
		left: 34rpx;
		top: 130rpx;
		width: 688rpx;
		height: 390rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;

	}
</style>
